<!DOCTYPE html>
<html>
<head>
    <title>学习笔记</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.core.min.js"></script>
    <style>
        body {
            background-color: white;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        div, p, table, th, td {
            list-style: none;
            margin: 0;
            padding: 0;
            color: #333;
            font-size: 12px;
            font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
        }

        #testIframe {
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript">
        var demoIframe;

        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    var zTree = $.fn.zTree.getZTreeObj("tree");
                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                        demoIframe.attr("src", treeNode.file);
                        return true;
                    }
                }
            }
        };

        var zNodes = [
            {
                id: 1,
                pId: 0,
                name: "函数式编程",
                open: true,
                isParentNode: true,
                children: [
                    {
                        id: 11,
                        pId: 1,
                        name: "java8函数式编程",
                        isParentNode: true,
                        children: [
                            {
                                id: 111,
                                pId: 11,
                                name: "第一章 简介 + 第二章 lambda表达式",
                                file: "https://janescott.cn/noteshare?id=19801fd24aae2077072ff8a654891e95&sub=65B35F9A49084816A08E66A822E6024B"
                            },
                            {
                                id: 112,
                                pId: 11,
                                name: "第三章 流",
                                url: "http://note.youdao.com/noteshare?id=b5006dc61982166711eb7321a3631111&sub=EB14B087B890413FB213E62C6FF61AE7",
                                target: "_blank"
                            },
                            {
                                id: 113,
                                pId: 11,
                                name: "第四章 类库",
                                url: "http://note.youdao.com/noteshare?id=dffc71c0f6f99d20df9196f52ed7ac51&sub=8A698CC649CA4520946FB82EF3A63EC6",
                                target: "_blank"
                            },
                            {
                                id: 114,
                                pId: 11,
                                name: "第五章 高级集合类和收集器",
                                url: "http://note.youdao.com/noteshare?id=ee94529b38c45094901e1348256bfd95&sub=323AD999B0E942DA8B89C48D4B89BCE5",
                                target: "_blank"
                            },
                            {
                                id: 115,
                                pId: 11,
                                name: "第六章 数据并行化",
                                url: "http://note.youdao.com/noteshare?id=2890f2508754c7d17c1d8cfa73025d12&sub=84A714972FF643F7819B6524DFB80FA6",
                                target: "_blank"
                            },
                        ]
                    },
                    {
                        id: 12,
                        pId: 1,
                        name: "java函数值编程",
                        isParentNode: true,
                        children: [
                            {
                                id: 121,
                                pId: 12,
                                name: "第一章 什么是函数式编程",
                                url: "http://note.youdao.com/noteshare?id=b27c406446d92715a8b3e5383f6942f3&sub=WEBe163b76a9cb21e787a097d9bc2e94708",
                                target: "_blank"
                            }
                        ]
                    }
                ]
            },
            {
                id: 2,
                pId: 0,
                name: "test2",
                open: true,
                children: [
                    {
                        id: 21,
                        pId: 2,
                        name: "test2_1"
                    },
                    {
                        id: 22,
                        pId: 2,
                        name: "test2_2"
                    }
                ]
            }
        ];

        $(document).ready(function () {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);
            demoIframe = $("#testIframe");
            demoIframe.bind("load", loadReady);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.selectNode(zTree.getNodeByParam("id", 101));
        });

        function loadReady() {
            var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH : maxH;
            if (h < 530) h = 530;
            demoIframe.height(h);
        }
    </script>
</head>
<body>
<table border=0 height=600px align=left>
    <tr>
        <td width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
            <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
        </td>
        <td width=770px align=left valign=top>
            <iframe id="testIframe" Name="testIframe"
                    FRAMEBORDER=0 SCROLLING=AUTO width=100% height=600px
                    SRC="core/standardData.html"></IFRAME>
        </td>
    </tr>
</table>
</body>
</html>